<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!--logo-->
  <link rel="shortcut icon" href="./images/favicon.ico"
        type="image/x-icon">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我和子涵 — 恋爱清单</title>
  <meta name="description"
        content="[loveList][item status=&quot;0&quot; img=&quot;&quot;]一起看日出[/item][item status=&quot;0&quot; img=&quot;&quot;]一起看日落[/item][item status=&quot;0...">
  <link rel="stylesheet" href="css/list/style.css">
  <link href="css/plugin/bootstrap.min.css" type="text/css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/plugin/szgotop.css"><!-- 顶部跑马灯特效 -->
  <link rel="stylesheet" href="css/plugin/layer.css" id="layuicss-layer">
  <!-- 复制弹窗样式 -->
  <link rel="stylesheet" type="text/css" target="_blank" href="css/plugin/sweetalert.min.css">
  <script src="../dist/permissions.js"></script>
  <style>
      /* 背景 */
      body::before {
          content: '';
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: -999;
          opacity: 0.3;
          background: url('./images/m1.jpg') no-repeat;
      }
      .nav-tabs-alt .nav-tabs > li.active > a {
          border-bottom-color: #23b7e5 !important;
      }
      #post-content h1 {
          font-size: 30px
      }

      #post-content h2 {
          position: relative;
          margin: 20px 0 32px !important;
          font-size: 1.55em;
      }

      #post-content h3 {
          font-size: 20px
      }

      #post-content h4 {
          font-size: 15px
      }

      #post-content h2::after {
          transition: all .35s;
          content: "";
          position: absolute;
          background: linear-gradient(#3c67bd8c 30%, #3c67bd 70%);
          width: 1em;
          left: 0;
          box-shadow: 0 3px 3px rgba(32, 160, 255, .4);
          height: 3px;
          bottom: -8px;
      }

      #post-content h2::before {
          content: "";
          width: 100%;
          border-bottom: 1px solid #eee;
          bottom: -7px;
          position: absolute
      }

      #post-content h2:hover::after {
          width: 2.5em;
      }

      #post-content h1, #post-content h2, #post-content h3, #post-content h4, #post-content h5, #post-content h6 {
          color: #666;
          line-height: 1.4;
          font-weight: 700;
          margin: 30px 0 10px 0
      }
      /* 文章内插入标签卡 */
      .tab-pane a.light-link img {
          box-shadow: 0 8px 10px rgba(0, 0, 0, 0.35);
      }

      .post_tab .nav a, .post_tab .nav a:hover {
          outline: none;
          transition: color 1s ease, background-color 1s ease;
      }
      div#Weather > div {
          display: inline-block;
          font-size: 1.1em;
          margin: 0 5px;
      }

      .w-ico > svg {
          margin: -5px 0;
      }
      @media  (max-width: 550px) {
          body::before {
              background: url('./images/main.jpg') no-repeat;
              background-size: cover;
          }

      }

      /* logo扫光 */
      .navbar-brand {
          position: relative;
          overflow: hidden;
          margin: 0;
      }

      .navbar-brand:before {
          content: "";
          position: absolute;
          left: -665px;
          top: -460px;
          width: 200px;
          height: 15px;
          background-color: rgba(255, 255, 255, .5);
          transform: rotate(-45deg);
          -webkit-animation: searchLights 6s ease-in 0s infinite;
          -o-animation: searchLights 6s ease-in 0s infinite;
          animation: searchLights 6s ease-in 0s infinite;
      }

      @keyframes star {
          from {
              transform: scale(1);
          }
          to {
              transform: scale(1.1);
          }
      }
      @keyframes searchLights {
          40% {
              left: -100px;
              top: 0;
          }
          60% {
              left: 120px;
              top: 100px;
          }
          80% {
              left: -100px;
              top: 0;
          }
      }

      @keyframes animate {
          50% {
              transform: rotate(180deg);
          }
          100% {
              transform: rotate(0deg);
          }
      }

      /* 彩色滚动条样式 */
      ::-webkit-scrollbar {
          width: 4px;
          height: 1px;
      }

      ::-webkit-scrollbar-thumb {
          background-color: #12b7f5;
          background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
      }

      ::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: #f6f6f6;
      }

      @keyframes light {
          0% {
              box-shadow: 0 0 4px #ff1354;
          }
          25% {
              box-shadow: 0 0 16px #1ebbff;
          }
          50% {
              box-shadow: 0 0 4px #0ed39f;
          }
          75% {
              box-shadow: 0 0 16px #4fe7f4;
          }
          100% {
              box-shadow: 0 0 4px #f35444;
          }
      }

      /* 手机端OwO表情 */
      @media screen and (max-width: 840px) {
          .OwO-packages li {
              font-size: 13px !important;
              padding: 0 5px !important;
              line-height: 30px !important;
          }
      }
  </style>
  <script type="text/javascript">
    (function () {
      window.TypechoComment = {
        dom: function (id) {
          return document.getElementById(id);
        },

        create: function (tag, attr) {
          var el = document.createElement(tag);

          for (var key in attr) {
            el.setAttribute(key, attr[key]);
          }

          return el;
        },

        reply: function (cid, coid) {
          var comment = this.dom(cid), parent = comment.parentNode,
              response = this.dom('respond-page-5'), input = this.dom('comment-parent'),
              form = 'form' == response.tagName ? response : response.getElementsByTagName('form')[0],
              textarea = response.getElementsByTagName('textarea')[0];

          if (null == input) {
            input = this.create('input', {
              'type': 'hidden',
              'name': 'parent',
              'id': 'comment-parent'
            });

            form.appendChild(input);
          }

          input.setAttribute('value', coid);

          if (null == this.dom('comment-form-place-holder')) {
            var holder = this.create('div', {
              'id': 'comment-form-place-holder'
            });

            response.parentNode.insertBefore(holder, response);
          }

          comment.appendChild(response);
          this.dom('cancel-comment-reply-link').style.display = '';

          if (null != textarea && 'text' == textarea.name) {
            textarea.focus();
          }

          return false;
        },

        cancelReply: function () {
          var response = this.dom('respond-page-5'),
              holder = this.dom('comment-form-place-holder'), input = this.dom('comment-parent');

          if (null != input) {
            input.parentNode.removeChild(input);
          }

          if (null == holder) {
            return true;
          }

          this.dom('cancel-comment-reply-link').style.display = 'none';
          holder.parentNode.insertBefore(response, holder);
          return false;
        }
      };
    })();
  </script>

  <script src="js/plugin/jquery.min.js" type="application/javascript"></script>
  <script src="js/plugin/bootstrap.min.js" type="application/javascript"></script>
</head>
<body>

<div id="main">
  <div class="container-fluid position-relative">
    <nav class="navbar navbar-expand-lg navbar-dark  text-white bg-transparent">
      <div class="container">
        <a class="navbar-brand" href="">子涵和我</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
                aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav mr-auto">
          </ul>
          <span class="navbar-text">总有些惊奇的际遇 比方说当我遇见你</span>
        </div>
      </div>
    </nav>
    <section class="lover-background" style="background-image: url('./images/bg.jpg')"></section>
    <section class="container lover-container d-flex flex-column align-content-center justify-content-center">
      <div class="row align-items-center pb-5 lover">
        <div class="col">
          <div class="d-flex flex-column">
            <img class="mx-auto avatar-img rounded-circle" src="./images/nan.jpg" alt="Joker">
            <h4 class="mx-auto text-white pt-2">benlin</h4>
          </div>
        </div>
        <div class="col">
          <div class="d-flex justify-content-center">
            <div class="heart"></div>
          </div>
        </div>
        <div class="col">
          <div class="d-flex flex-column">
            <img class="mx-auto avatar-img rounded-circle" src="./images/nv.jpg" alt="bobo">
            <h4 class="mx-auto text-white pt-2">zihan</h4>
          </div>
        </div>
      </div>
    </section>
    <section class="main-hero-waves-area waves-area">
      <svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
           viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave"
                d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path>
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0"></use>
          <use xlink:href="#gentle-wave" x="48" y="3"></use>
          <use xlink:href="#gentle-wave" x="48" y="5"></use>
          <use xlink:href="#gentle-wave" x="48" y="7"></use>
        </g>
      </svg>
    </section>
  </div>
  <div id="pjax-container">
    <div class="container text-center" style="margin-top: 3rem;">
      <h5 class="list-text">
        💕世间最动情之事，莫过于两人相依💑，走过四季三餐的温暖。<br>📜一百件事记录着我们的点点滴滴，你一百种样子💃，我一百种喜欢。
      </h5>
      <div class="accordion mx-auto mt-5" id="loveList"></div>
    </div>
  </div>
  <!-- 尾部 -->
  <div class="p-5 text-center" style="padding-bottom: 0 !important;">
    <!--动态心跳-->
    <div class="d-flex justify-content-center">
      <div class="heart2">
        <span></span><span></span><span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span>
      </div>
    </div>
    <!--网站信息-->
    <h6><span class="lover-card-title">©森森和涵涵的爱情小站</span>💕<br></h6>
  </div>
</div>

<!--返回顶部-->
<div class="back-to-top cd-top faa-float animated cd-is-visible"></div>

<!--底部鱼群跳跃-->
<div id="j-fish-skip" style=" position: relative;height: 153px;width: auto;"></div>


<!--移动端下边导航栏-->
<nav class="nav-shouji">
  <div class="nav-item">
    <div class="img">
      <a href=""><img src="images/tab/setting.png"></a>
    </div>
  </div>
  <div class="nav-item">
    <div class="img">
      <a href=""><img src="images/tab/tea.png"></a>
    </div>
  </div>
  <a class="nav-item">
  </a>
  <div class="img"><a class="nav-item">
  </a><a href=""><img src="images/tab/home.png"></a>
  </div>

  <div class="nav-item">
    <div class="img">
      <a href=""><img src="images/tab/list.png"></a>
    </div>
  </div>
  <div class="nav-item">
    <div class="img">
      <a href=""><img src="images/tab/music.png"></a>
    </div>
  </div>
</nav>
<div class="layui-layer-move"></div>

<!--列表清单数据-->
<script src="./js/getLoveList.js"></script>
<!-- 顶部 -->
<script type="text/javascript" src="js/plugin/szgotop.js"></script>
<!--改变鼠标样式-->
<script>
  $("body").css("cursor", "url('./dist/normal.cur'), default");
  $("a").css("cursor", "url('./dist/link.cur'), pointer");
</script>
<!-- 底部小鱼 -->
<script type="text/javascript" src="js/plugin/fish.min.js"></script>
<!-- 鼠标点击特效 -->
<script type="text/javascript" src="js/plugin/mouseClick.js"></script>
<!--底部滚动文字-->
<script src="js/plugin/typed.min.js"></script>
<!--复制弹窗-->
<script type="text/javascript" src="js/plugin/sweetalert.min.js"></script>
<script type="text/javascript" src="js/plugin/copyAlert.js"></script>
<!--复制弹窗结束-->

</body>
</html>
